import { onHide } from '@dcloudio/uni-app';
<!--
 * @Description:
 * @Date: 2024-05-14 09:00:16
 * @LastEditTime: 2024-10-11 14:33:55
-->
<route lang="json5" type="login">
{
  style: {
    navigationBarTitleText: '我的',
  },
}
</route>
<template>
  <view class="mine w-screen h-screen flex flex-col items-center">
    <view class="w-100%" style="height: 160px">
      <div class="header">
        <div class="info" @click="skipPage">
          <image
            :src="currentRole === 'leader' ? leaderAvator : peopleAvator"
            style="width: 50px; height: 50px"
            mode="'scaleToFill'"
          />
          <div class="info-content">
            <span class="info-content__name">{{ userStore.userInfo.nickname }}</span>
            <div
              class="info-content__tag"
              :style="{ background: currentRole === 'leader' ? '#b88306' : '#307ce2' }"
            >
              {{ currentRole === 'leader' ? '检察官' : '市民' }}
            </div>
          </div>
        </div>
      </div>
    </view>
    <view class="w-100% h-100% flex flex-col bg-#fff">
      <div class="divider">常用操作</div>
      <div class="w-100% flex flex-wrap gap-20rpx px-30rpx">
        <div class="operate" @click="skipPage">
          <image
            :src="currentRole === 'leader' ? elcDel : myAply"
            style="width: 30px; height: 30px"
            mode="'scaleToFill'"
          />
          <div class="operate-content">
            <span class="operate-content__name">
              {{ currentRole === 'leader' ? '电子送达' : '我的申请' }}
            </span>
            <span class="operate-content__info">
              {{ `点击查看${currentRole === 'leader' ? '送达记录' : '申请列表'}` }}
            </span>
          </div>
        </div>
        <div class="operate" @click="toService">
          <image
            :src="currentRole === 'leader' ? elcDel : myAply"
            style="width: 30px; height: 30px"
            mode="'scaleToFill'"
          />
          <div class="operate-content">
            <span class="operate-content__name">
              {{ currentRole === 'leader' ? '视频接访' : '我的预约服务' }}
            </span>
            <span class="operate-content__info">
              {{ `点击查看${currentRole === 'leader' ? '接访申请' : '预约进度'}` }}
            </span>
          </div>
        </div>
        <div class="operate" @click="toShenhe" v-if="currentRole === 'leader'">
          <image
            :src="currentRole === 'leader' ? elcDel : myAply"
            style="width: 30px; height: 30px"
            mode="'scaleToFill'"
          />
          <div class="operate-content">
            <span class="operate-content__name">审核处理</span>
            <span class="operate-content__info">点击处理市民申请</span>
          </div>
        </div>
      </div>
      <div v-if="currentRole === 'leader'" class="reset" @click="toResetPwd">
        <div class="reset-content">
          <img :src="reset" style="width: 40px; height: 30px" />
          <div class="w-100%" style="margin-left: 16px">重置密码</div>
          <img style="width: 20px; height: 20px; margin-left: auto" :src="arrow" />
        </div>
      </div>
      <div class="logout">
        <button
          class="bg-#4D80F0 w-60% text-#fff text-30rpx h-80rpx rounded-20rpx"
          @click="handleLogout"
        >
          退出登录
        </button>
      </div>
    </view>
  </view>
</template>

<script setup lang="ts">
import { logout } from '@/service/index/foo'
import leaderAvator from '../../static/mine/检察长登录头像.png'
import peopleAvator from '../../static/mine/头像.png'
import elcDel from '../../static/mine/电子送达图标.png'
import myAply from '../../static/mine/我的申请图标.png'
import reset from '../../static/mine/reset.png'
import arrow from '../../static/mine/arrow.png'
import { useUserStore } from '@/store'

onShow(() => {
  currentRole.value = userStore.userInfo.currentRole
})

const userStore = useUserStore()
const currentRole = ref('')
function skipPage() {
  if (currentRole.value === 'leader') {
    uni.navigateTo({
      url: `/pages/ElectronicDelivery/index`,
    })
  } else {
    uni.navigateTo({
      url: `/pages/menu/subRecord/index`,
    })
  }
}

function toService() {
  uni.navigateTo({
    url: `/pages/mine/${currentRole.value === 'leader' ? 'videoInterview' : 'reservationService'}`,
  })
}

function toResetPwd() {
  uni.navigateTo({
    url: `/pages/mine/resetPwd`,
  })
}
function toShenhe() {
  uni.navigateTo({
    url: `/pages/mine/shenhe`,
  })
}
async function handleLogout() {
  await logout().then((res) => {
    if (res.data) {
      nextTick(() => {
        uni.reLaunch({ url: '/pages/home/index' })
        userStore.clearUserInfo()
      })
    }
  })
}
</script>
<style lang="scss" scoped>
.header {
  padding-top: 16px;
  background: linear-gradient(to bottom, #0670ff, #ffffff);

  &-card {
    box-shadow: 0px 0px 1px 1px #c8c8c8 !important;
  }
}

.title {
  display: flex;

  &-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 16px;

    &__name {
      font-size: 20px;
      font-weight: bold;
    }

    &__tag {
      margin-top: 8px;
      font-size: 14px;
    }
  }
}

.divider {
  height: 50px;
  padding-left: 16px;
  font-weight: bold;
  line-height: 50px;
}

.operate {
  display: flex;
  align-items: center;
  width: 40%;
  height: 66px;
  padding-left: 8px;

  border: 1px solid #cdcdcd;
  border-radius: 10px;

  &-content {
    display: flex;
    flex-direction: column;
    margin-left: 16px;

    &__name {
      font-size: 15px;
      color: black;
    }

    &__info {
      margin-top: 4px;
      font-size: 12px;
      color: #999999;
    }
  }
}

.info {
  display: flex;
  align-items: center;
  height: 110px;
  padding-left: 16px;
  margin: 0px 16px;
  background-color: #fff;
  border: 1px solid #cdcdcd;
  border-radius: 10px;

  &-content {
    display: flex;
    flex-direction: column;
    margin-left: 16px;

    &__name {
      margin-bottom: 4px;
      font-size: 24px;
      color: black;
    }

    &__tag {
      width: max-content;
      padding: 6rpx 20rpx;
      font-size: 28rpx;
      color: #fff;
      text-align: center;
      border-radius: 20rpx;
    }
  }
}

.reset {
  padding: 16px;
  margin-top: 16px;
  border-top: 3px solid #efefef;

  &-content {
    display: flex;
    align-items: center;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid #eeeeee;
  }
}

.logout {
  position: absolute;
  bottom: 5%;
  display: flex;
  align-items: center;
  width: 100%;
}
</style>
